<?php
/* Smarty version 3.1.33, created on 2019-12-15 14:23:15
  from 'D:\xampp\htdocs\ps_project\application\views\templates\diner\shop\cart.html' */

/* @var Smarty_Internal_Template $_smarty_tpl */
if ($_smarty_tpl->_decodeProperties($_smarty_tpl, array (
  'version' => '3.1.33',
  'unifunc' => 'content_5df633c3e5a512_94261848',
  'has_nocache_code' => false,
  'file_dependency' => 
  array (
    'cb918e8bb97926c7cb18805bf5763340dee621c1' => 
    array (
      0 => 'D:\\xampp\\htdocs\\ps_project\\application\\views\\templates\\diner\\shop\\cart.html',
      1 => 1576416194,
      2 => 'file',
    ),
  ),
  'includes' => 
  array (
  ),
),false)) {
function content_5df633c3e5a512_94261848 (Smarty_Internal_Template $_smarty_tpl) {
?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
		.cart {
			position: fixed;
			right: 0;
			bottom: 0;
			width: 320px;
			height: auto;
		}
		.wrapper {
			display: grid;
			width: 320px;
			height: 46px;
			grid-template-columns: 195px 125px;
		}
		.cart-info {
			background-color: #2c2c2c;
			display: flex;
			align-items: flex-end;
		}
		.money-icon {
			color: #e4e4e4;
			margin-bottom: 6px;
			margin-left: 9px;
			font-size: 20px;
		}
		.money-count {
			color: #e3e3e3;
			font-size: 28px;
			margin-bottom: 6px;
		}
		.cart-status {
			background-color: #e4e4e4;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.cart-icon img {
			width: 30px;
		}
		.cart-icon {
			margin-left: 4px;
			margin-bottom: 2px;
		}
		.status-info {
			font-size: 14px;
			color: #333;
		}
		.cart-header-content {
			width: 290px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.cart-header {
			width: 320px;
			height: auto;
			padding-left: 20px;
			padding-right: 24px;
			background-color: #fafafa;
			border-top: 2px solid #0089dc;
		}

		.single-order {
			width: 320px;
			height: 50px;
		}
		.order-info {
			margin: 3px auto 7px;
			width: 310px;
			height: 40px;
			border-top-color: #eee;
			border-top-style: solid;
			border-top-width: 1px;
		}
		.order-info:before {
			content: '';
			height: 100%;
			display: inline-block;
			vertical-align: middle;
		}
		.order-food-name {
			width: 40%;
			display: inline-block;
			vertical-align: middle;
		}
		.order-food-name p {
			font-size: 14px;
			color: #666;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.order-num-select {
			display: table;
		}
		.select-num-form {
			width: 35%;
			display: inline-block;
			vertical-align: middle;
		}
		.add-num {
			border: 1px solid #ddd;
			display: table-cell;
			width: 20px;
			height: 20px;
			padding: 0;
			margin: 0;
			background-color: #f7f7f7;
			outline: 0;
		}
		.input-num {
			border: 0;
			border-top: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
			width: 33px;
			height: 18px;
			display: table-cell;
			padding: 0;
			margin: 0;
			cursor: pointer;
			outline: 0;
		}
		.minus-num {
			display: table-cell;
			width: 20px;
			height: 20px;
			border: 1px solid #ddd;
			padding: 0;
			margin: 0;
			background-color: #f7f7f7;
			outline: 0;
		}
		.add-num:active {
			color: blue;
			background-color: #ddd;
		}
		.minus-num:active {
			color: blue;
			background-color: #ddd;
		}
		.money-of-this-food {
			color: #f17530;
			display: inline-block;
			vertical-align: middle;
		}

		.cart-pieces {
			position: absolute;
			height: 16px;
			left: 26px;
			min-width: 16px;
			border-radius: 50%;
			font-size: 12px;
			text-align: center;
			background-color: #ff2828;
			color: #fff;
			font-weight: 700;
			bottom: 23px;
		}

		#emptyCart {
			color: blue;
		}
	</style>
</head>
<body>
<div class="cart">
    <div class="cart-header">
        <div class="cart-header-content">
            <div style="color: #333333; font-size: 14px">
                购物车<span id="emptyCart">[清空]</span>
            </div>
            <div>
                <img src="../assets/images/cart.svg" style="width: 30px;">
            </div>
        </div>
    </div>
    <div id="bucket">
        <div class="single-order">
            <div class="order-info">
                <div class="order-food-name">
                    <p>热大紅袍奶茶</p>
                </div>
                <div class="select-num-form">
                    <form class="order-num-select">
                        <input type="hidden">
                        <button class="add-num" type="button">-</button>
                        <input class="input-num">
                        <button class="minus-num" type="button">+</button>
                    </form>
                </div>
                <div class="money-of-this-food">￥16</div>
            </div>
        </div>
        <div class="single-order">
            <div class="order-info">
                <div class="order-food-name">
                    <p>热大紅袍奶茶</p>
                </div>
                <div class="select-num-form">
                    <form class="order-num-select">
                        <input type="hidden">
                        <button class="add-num" type="button">-</button>
                        <input class="input-num">
                        <button class="minus-num" type="button">+</button>
                    </form>
                </div>
                <div class="money-of-this-food">￥16</div>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <div class="cart-info">
            <span class="cart-icon"><img src="../assets/open-iconic/svg/cart.svg"><span class="cart-pieces">2</span></span>
            <span class="money-icon">￥</span><span class="money-count">16</span>
        </div>
        <div class="cart-status">
            <p class="status-info">购物车是空的</p>
        </div>
    </div>
</div>
</body>
</html>
<?php }
}
